<template>
  <el-dropdown
    trigger="click"
    style="float: left;"
    @command="handleChartCell"
  >
    <span class="el-dropdown-link">
      <div class="component-icon-btn">
        <div class="component-icon-btn-icon" style="line-height: 16px;float: left;">
          <i class="icons icons-16 icons-16-bar" />
        </div>
        <div style="width: 10px;height: 24px;float: left;position: relative;">
          <div class="right-btn" />
        </div>
      </div>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="histogram">
        <div class="chart-icon chart-icon-columnar" />
        <div class="chart-icon-label">柱状图</div>
      </el-dropdown-item>
      <el-dropdown-item command="bar">
        <div class="chart-icon chart-icon-bar" />
        <div class="chart-icon-label">条形图</div>
      </el-dropdown-item>
      <el-dropdown-item command="line">
        <div class="chart-icon chart-icon-line" />
        <div class="chart-icon-label">折线图</div>
      </el-dropdown-item>
      <el-dropdown-item command="area">
        <div class="chart-icon chart-icon-area" />
        <div class="chart-icon-label">区域图</div>
      </el-dropdown-item>
      <el-dropdown-item command="pie">
        <div style="position: absolute;margin-top: 5px;margin-left: -1px;" class="chart-icon chart-icon-pie" />
        <div style="margin-left: 29px;" class="chart-icon-label">饼状图</div>
      </el-dropdown-item>
      <el-dropdown-item command="doughnut">
        <div style="position: absolute;margin-top: 5px;margin-left: -1px;" class="chart-icon chart-icon-doughnut" />
        <div style="margin-left: 29px;" class="chart-icon-label">环形图</div>
      </el-dropdown-item>
      <el-dropdown-item command="radar">
        <div class="chart-icon chart-icon-radar" />
        <div class="chart-icon-label">雷达图</div>
      </el-dropdown-item>
      <el-dropdown-item command="scatter">
        <div class="chart-icon chart-icon-scatter" />
        <div class="chart-icon-label">散点图</div>
      </el-dropdown-item>
      <el-dropdown-item command="bubble">
        <div class="chart-icon chart-icon-bubble" />
        <div class="chart-icon-label">气泡图</div>
      </el-dropdown-item>
      <el-dropdown-item command="combo">
        <div class="chart-icon chart-icon-combo" />
        <div class="chart-icon-label">组合图</div>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { undoManager, setDirty } from '../Utils.js'

export default {
  props: {
    context: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {

    }
  },
  mounted: function() {

  },
  methods: {
    handleChartCell(val) {
      const context = this.context
      const cellDef = context.getSelectedCell()
      if (!cellDef) {
        return
      }
      const oldCellDataValue = JSON.parse(JSON.stringify(cellDef.value))
      let newCellDataValue = null
      if (cellDef.value.type === 'chart') {
        cellDef.value.chart.dataset.type = val
        cellDef.value.chart.options = null
      } else {
        newCellDataValue = {
          type: 'chart',
          chart: {
            dataset: {
              type: val
            }
          }
        }
        cellDef.value = newCellDataValue
      }
      context.refreshSelected()
      setDirty()
      undoManager.add({
        redo: function() {
          if (newCellDataValue) {
            cellDef.value = newCellDataValue
          } else {
            cellDef.value.chart.dataset.type = val
            cellDef.value.chart.options = null
          }
          context.refreshSelected()
          setDirty()
        },
        undo: function() {
          cellDef.value = oldCellDataValue
          context.refreshSelected()
          setDirty()
        }
      })
    }
  }
}
</script>
<style>
  .chart-icon {
    vertical-align: text-bottom;
    display: inline-block;
    height: 24px;
    width: 24px;
  }

  .chart-icon-label {
    display: inline-block;
    margin-left: 5px;
    color:#606266
  }

  .chart-icon-columnar {
    background-image: url();
  }

  .chart-icon-bar {
    background-image: url();
  }

  .chart-icon-line {
    background-image: url();
  }

  .chart-icon-area {
    background-image: url();
  }

  .chart-icon-pie {
    background-image: url();
  }

  .chart-icon-doughnut {
    background-image: url();
  }

  .chart-icon-radar {
    background-image: url();
  }

  .chart-icon-scatter {
    background-image: url();
  }

  .chart-icon-bubble {
    background-image: url();
  }

  .chart-icon-combo {
    background-image: url();
  }
</style>
